<script>
export default {
  props: {
    modelValue: {
      default: 1
    }
  },
  data() {
    return {

    }
  },
  methods: {
    jisuan(fuhao) {
      if (fuhao === 100) {
        // 减法
        if (this.modelValue < 2) return
        this.$emit('update:modelValue', this.modelValue - 1)
      }
      else if (fuhao === 101) {
        // 加法
        this.$emit('update:modelValue', this.modelValue + 1)

      }
    },
    changeValue(e) {
      const num = +e.target.value
      if (num < 1 || isNaN(num)) {
        e.target.value = this.modelValue
        return
      }
      this.$emit('update:modelValue', e.target.value)
    },
  },
};
</script>

<template>
  <div class="count-box">
    <button class="jian" @click="jisuan(100)">-</button>
    <input @change="changeValue" :value="modelValue" class="inp" type="number">
    <button class="jia" @click="jisuan(101)">+</button>

  </div>
</template>

<style lang="scss" scoped>
.count-box {
  width: 110px;
  display: flex;


  .jia,
  .jian {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    background-color: #efefef;

  }

  .inp {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    margin: 0 5px;
    background-color: #efefef;
    text-align: center;
    line-height: 30px;
  }
}
</style>